<template>
  <div class="app-container">
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row>
      <el-table-column align="center" label="时间" width="170">
        <template slot-scope="scope">{{ scope.row.createDate | filterTime }}</template>
      </el-table-column>
      <el-table-column align="center" label="作者" prop="name" width="150"/>
      <el-table-column align="center" label="帖子详情">
        <template slot-scope="scope">
          <div class="text" title="点击查看详情" @click="scaleContent(scope.row.content)">{{ scope.row.content }}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="图片" width="400">
        <template slot-scope="scope">
          <div v-for="(item,index) in scope.row.contentImages" :key="index" class="imgs">
            <img :src="item" class="img" title="点击放大" @click="scaleImg(item)">
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="点赞数" prop="praiseNumber" width="80"/>
      <el-table-column align="center" label="评论数" prop="commentsNumber" width="80"/>
      <!-- <el-table-column align="center" label="分享次数" prop="praiseNumber" width="80"/> -->
      <!-- <el-table-column align="center" label="举报次数" prop="commentsNumber" width="80"/> -->
      <el-table-column align="center" label="审核状态" width="80">
        <template slot-scope="scope">{{ scope.row.checkState == '0' ? '未通过' : '已通过' }}</template>
      </el-table-column>
      <el-table-column align="center" label="审核描述">
        <template slot-scope="scope">{{ scope.row.checkStateValue ? scope.row.checkStateValue : '/' }}</template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="80">
        <template slot-scope="scope">
          <el-button size="mini" @click="changeStatus(scope.row.userId, scope.row.postsId)">审核</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="totalPages>1" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.size" align="center" @pagination="fetchData" />
    <el-dialog :visible.sync="imgDialogVisible" title="图片详情" width="80%" center>
      <img :src="curScaleImg" class="curScaleImg">
    </el-dialog>
    <el-dialog :visible.sync="dialogFormVisible" title="请审核" width="50%" center>
      <el-form size="medium">
        <el-form-item>
          <el-radio v-model="value" label="1">删除</el-radio>
          <el-radio v-model="value" label="2">禁言</el-radio>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateStatus()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getCircleList, deleteCircle, forbiddenWordsCircle } from '@/api/table'
import Pagination from '@/components/Pagination'
import { parseTime } from '@/utils/index'
export default {
  name: 'AppCircle',
  components: { Pagination },
  filters: {
    filterTime(time) {
      return parseTime(time)
    }
  },
  data() {
    return {
      list: null,
      listLoading: true,
      total: 0,
      totalPages: 0,
      listQuery: {
        page: 1,
        size: 15
      },
      curScaleImg: '',
      imgDialogVisible: false,
      userId: '',
      postsId: '',
      value: '1',
      dialogFormVisible: false
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.listLoading = true
      getCircleList(this.listQuery).then(response => {
        this.list = response.data.dataList
        this.total = response.data.totalElements
        this.totalPages = response.data.totalPages
        setTimeout(() => {
          this.listLoading = false
        }, 300)
      })
    },
    scaleImg(url) {
      this.curScaleImg = url
      this.imgDialogVisible = true
    },
    scaleContent(text) {
      this.$alert(text, '内容详情', {
        confirmButtonText: '确定'
      })
    },
    changeStatus(userId, postsId) {
      this.value = '1'
      this.dialogFormVisible = true
      this.userId = userId
      this.postsId = postsId
    },
    updateStatus() {
      if (this.value === '1') {
        // 删除帖子
        deleteCircle({
          postsId: this.postsId
        }).then(response => {
          setTimeout(() => {
            this.listLoading = false
          }, 300)
          if (response.code === 200) {
            this.$message({
              message: '操作成功',
              type: 'success'
            })
            this.dialogFormVisible = false
            this.listQuery.page = 1
            this.fetchData()
          } else {
            this.$message.error('操作失败请重试')
          }
        })
      }
      if (this.value === '2') {
        // 禁言
        forbiddenWordsCircle({
          userId: this.userId
        }).then(response => {
          setTimeout(() => {
            this.listLoading = false
          }, 1.5 * 1000)
          if (response.code === 200) {
            this.$message({
              message: '操作成功',
              type: 'success'
            })
            this.dialogFormVisible = false
            this.listQuery.page = 1
            this.fetchData()
          } else {
            this.$message.error('操作失败请重试')
          }
        })
      }
    }
  }
}
</script>>

<style rel="stylesheet/scss" lang="scss">
.imgs{
  width:100px;
  height:100px;
  display:inline-block;
  margin: 0 10px;
  border:1px solid #eee;
}
.img{
  width:100px;
  height:100px;
  display:inline-block;
  cursor: pointer;
}
.curScaleImg{
  width:auto;
  max-width:100%;
  height:500px;
}
.text{
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
  cursor: pointer;
  color: rgb(64, 158, 255);
  text-decoration: underline;
}
</style>
